<template>
	<view class="">
		<view class="tabbarOrder pf">
			<tabbar :showLabel="false" :active="active" :tab="tab" @change_status="change_status"></tabbar>
		</view>
		<view class="order"  @touchstart="touchStart($event)" @touchmove="touchMove($event)" @touchend="touchEnd($event)">
			<refresh :freshFlag="freshFlag" :loadMsg="loadMsg"></refresh>
			<order-card :order="order" :imagelist="imagelist" :showBtn="showBtn" :isCoupons="true"
			@receive="receive"
			></order-card>
		</view>
		<view class="getMore" @click="getMore" style="padding-bottom: 50rpx;" v-if="order.length > 4">
			<touch-bottom :isNone="isNone" :isLoad="isLoad" :isName="isName"></touch-bottom>
		</view>
		<empty :null_data="null_data" v-if="order.length == 0"></empty>
		<!-- 返回顶部 -->
		<backtop :show_top="show_top"></backtop>
	</view>
</template>
<script>
	import {
		mapState
	} from 'vuex';
	export default {
		components: {},
		computed: {
			...mapState({})
		},
		data() {
			return {
				null_data: {
				 null_img: this.imgUrl + 'nogroup.png',
				 text: '暂无拼团~'
				},
				isName: false,
				isLoad: false,
				isNone: false,
				order: [],
				btn_detail: '',
				btn_cancel: '',
				btn_red: '',
				isCoupons: false,
				pay: "应付",
				showBtn: true,
				active: 0,
				imagelist: [{
					img: this.imgUrl + "after_sale-1.png"
				}, {
					img: this.imgUrl + "after_sale-0.png"
				}, {
					img: this.imgUrl + "after_sale-2.png"
				}, {
					img: this.imgUrl + "after_sale-1.png"
				}, {
					img: this.imgUrl + "after_sale-0.png"
				}, ],
				tab: [{
						id: 0,
						label: "全部",
					},
					{
						id: 1,
						label: "正在拼团",
					}, {
						id: 2,
						label: "已拼成",
					},
					{
						id: 3,
						label: "未拼成",
					}
				],
				orderType: '',
				obj: {
					page: 1,
					pagesize: 10,
					member_id: 1,
					status: ''
				},
				top: 0,
				startY: 0, // 保存 y轴点的位置
				touching: false, // 代表当前是否处于 下拉刷新行为的开关，也就是当属于滚动行为时，就要退出该事件机制
				loadShowHeight: 0,
				scrollTop: 0,
				loadMinHeight: 0,
				refreshType: false,
				loadMsg: '',
				freshFlag: false,
				count: 0,
				hight: 0,
				show_top: false, // 回到顶部按钮显示
			};
		},
		watch: {
		    // this.obj.status  0 等待拼团 1 拼团成功 2 拼团失败
		    active(newVal, oldVal) {
		        if (newVal != oldVal) {
		            this.obj.page = 1;
		            if (newVal >= 1) {
		                this.obj.status = newVal - 1;
		            } else {
		                this.obj.status = '';
		            }
		            this.orderGroup();
		        }
		    },
			// 监听滚动高度
			hight(newVal, oldVal) {
				if (newVal > 100) {
					this.show_top = true;
				} else {
					this.show_top = false;
				}
			}
		},
		mounted() {
			this.orderType = 'myteamDetail'
			this.$store.dispatch('order/get_orderBtn', this.orderType)
		},
		onReachBottom() {
		    if (this.totalPages > this.obj.page) {
		        this.getMore();
		    } else {
		        this.isLoad = false;
		        this.isNone = true;
		        this.isName = true;
		    }
		},
		onLoad() {
			this.orderGroup();
		},
		methods: {
			// 确认订单
			receive(order_no, index) {
				let obj = {
					order_no
				}
				this.$store.dispatch('order/get_receive', obj).then(res => {
					// 状态修改为已签收
					this.order[index].status = 3;
					this.order[index].type = '已签收';
				})
			},
			// 当页面滚动时触发;
			onPageScroll(res) {
			    // 获取当前页面滚动高度；
				this.hight = res.scrollTop;
			},
			touchStart(e) {
				this.startY = e.touches[0].pageY;
			},
			touchMove(e) {
				if (this.scrollTop == 0) {
					let moveDistance = e.touches[0].pageY - this.startY;
					if (moveDistance > 0 && moveDistance <= (this.loadMaxHeight || 30)) {
						this.loadShowHeight = moveDistance;
					};
				};
			},
			touchEnd(e) {
				if (this.loadShowHeight >= (this.loadMinHeight || 20)) {
					this.refresh();
				} else {
					this.loadShowHeight = 0;
				}
			},
			refresh() {
				this.freshFlag = true;
				this.loadMsg = '刷新中...';
				setTimeout(() => {
					this.getMore();
					this.loadMsg = '刷新完成';
					this.loadShowHeight = 0;
					setTimeout(()=> {
						this.freshFlag = false;
					},500)
				}, 2000);
			},
			    orderGroup() {
			        this.$api('orderpageGroup', this.obj).then(res => {
			            this.order = res.data.data;
			            this.totalPages = res.data.totalPages;
			            if (this.order.length < this.obj.pagesize) {
			                this.isName = true;
			                this.isNone = true;
			            }
			            this.amendType();
			        })
			    },
			        // 修改拼团状态
			        amendType() {
			            this.order.forEach((item, index) => {
			                if (item.group_status == 0) {
			                    item.type = '等待拼团';
			                }
			                if (item.group_status == 1) {
			                    item.type = '拼团成功';
			                }
			                if (item.group_status == 2) {
			                    item.type = '拼团失败';
			                }
			            })
			        },
			        // 加载更多
			        getMore() {
			            if (this.isName) return;
			            this.isNone = true;
			            this.isLoad = true;
			            this.isName = false;
			            this.obj.page++
			            this.$api('orderpageGroup', this.obj).then(res => {                    
			                let arr = [...this.order, ...res.data.data];
			                this.order = arr;
			                this.totalPages = res.data.totalPages;
			                this.amendType();
			            })
			        }, 
			// 获取第一个分类的名称，以及下标
			change_status(index) {
				this.active = index
			},
			fun(express, active) {
				let arr = [];
				express.forEach((item, index) => {
					if (active == 0) {
						arr.push(item)
					} else if (item.status == 0 && active == 1) {
						arr.push(item)
					} else if (item.status == 1 && active == 2) {
						arr.push(item)
					} else if (item.status == 2 && active == 3) {
						arr.push(item)
					}
                    if (item.status == 0) {
                        item.type = '等待拼团';
                    }
                    if (item.status == 1) {
                        item.type = '拼团成功';
                    }
                    if (item.status == 2) {
                        item.type = '拼团失败';
                    }
				});
				return arr
			}
		}

	};
</script>

<style scoped lang="scss">
	@import './index.scss';
</style>
